<template>
	<view class="page">
		<Navbar iconColor="white" :showMenu="false" :showBack="true" :isDocument="false">
		</Navbar>
		<u-sticky :offset-top="-400 + navbarHeight">
			<view class="bg">
				<image src="https://images.unsplash.com/photo-1609788337997-68c679f9fa5b?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2N3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" mode="aspectFill" :style="{ filter: `blur(${blur  + 'rpx'})` }"></image>
				<view class="date" :style="{ filter: `blur(${blur  + 'rpx'})` }">
					<text>{{$tools.getDate('m')}}</text>
					<text>/{{$tools.getDate('d')}}</text>
				</view>
			</view>
		</u-sticky>
		
		<view class="singleSong">
			<view class="header" @click="playSingleSongs(songList)" :style="{ top: navbarHeight + 'rpx' }">
				<view class="playBtn">
					<image src="/static/images/play-ws.png" mode="widthFix"></image>
				</view>
				<text style="font-weight: bolder;color: #000;">播放全部</text>
			</view>
			<view class="songItem" v-for="(item,index) in songList" :key="index" @click="playMusic(item.id)">
				<view class="coverImg">
					<image v-if="currentMusicId != item.id" :src="item.al.picUrl" mode="widthFix"></image>
					<image v-if="currentMusicId == item.id" src="/static/images/play-red.png" mode="widthFix" style="width: 50%;border-radius: 0;"></image>
				</view>
				<view class="songItemLeft">
					<view class="songName">
						<text :style="{ color: currentMusicId == item.id ? '#ff483b' : '' }">{{item.name}}</text>
						<text v-if="item.alias" style="color: #ababab;margin-left: 4px;">({{item.alias[0]}})</text>
					</view>
					<view class="songItemInfo">
						<image v-if="item.originCoverType == 1" src="/static/images/originCover.png" mode="widthFix" style="width: 40rpx;border-radius: 5rpx;"></image>
						<image v-if="item.fee != 8" src="/static/images/VIPIcon.png" mode="heightFix"></image>
						<image v-if="item.fee != 8" src="/static/images/testListen.png" mode="heightFix" style="height: 32rpx;"></image>
						<text>{{item.ar[0].name}} - </text>
						<text>{{item.al.name}}</text>
					</view>
				</view>
				<view class="songItemRight">
					<image v-show="item.mv != 0" src="/static/images/mv.png" mode="widthFix"  @click.stop="playMv(item.mv)"></image>
					<image src="/static/images/more-g.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<Loading isFullScreen :active="loading" text="loading..."></Loading>
		<playMusicBar></playMusicBar>
	</view>
</template>

<script>
	import Navbar from '@/components/navbar.vue'
	import Loading from '@/components/loading/loading.vue'
	import { getDailyRecommendSongs } from '@/api/music.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			Navbar,
			Loading
		},
		data() {
			return {
				songList: [],
				blur: 0,
				loading: true
			}
		},
		onLoad() {
			getDailyRecommendSongs().then(res => {
				this.songList = res.data.dailySongs
				this.loading = false
			})
		},
		onPageScroll(e) {
			if(e.scrollTop * this.pixelRatio < 400) {
				this.blur = (e.scrollTop * this.pixelRatio) / 50
			}
		},
		computed: {
			...mapState(['pixelRatio','navbarHeight', 'currentMusicId'])
		},
		methods: {
			...mapMutations(['changePlayList', 'changeCurrentMusicId']),
			// 播放音乐并修改播放列表
			playSingleSongs(songsList) {
				// let songs = { song: songsList }
				this.changeCurrentMusicId(songsList[0].id)
				this.changePlayList(songsList)
			},
			// 点击单曲项,播放音乐
			playMusic(id) {
				this.changeCurrentMusicId(id)
			},
			// 播放mv
			playMv(id) {
				uni.navigateTo({
					url: `/pages/video/MV/mvDetail?id=${id}`,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.bg {
		width: 750rpx;
		height: 400rpx;
		background-color: rgba(0,0,0,1);
		border-radius: 100% 100% 100% 100% / 0% 0% 5% 5%;
		.date {
			position: absolute;
			left: 30rpx;
			top: 200rpx;
			text {
				color: #fff;
				&:first-child {
					font-size: 55rpx;
					font-weight: bolder;
					letter-spacing: 3rpx;
				}
				&:last-child {
					font-size: 32rpx;
					margin-left: 4rpx;
				}
			}
			z-index: 100;
		}
		image {
			width: 750rpx;
			height: 400rpx;
			transform: scale(1.1);
			border-radius: 100% 100% 100% 100% / 0% 0% 5% 5%;
		}
	}
	
	// 单曲页面样式
	.singleSong {
		width: 750rpx;
		padding: 0 0 100rpx;
		background-color: #fff;
		margin-top: 20rpx;
		.header {
			position: sticky;
			display: flex;
			align-items: center;
			width: 750rpx;
			padding-left: 30rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 34rpx;
			background-color: #fff;
			z-index: 10000;
			.playBtn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50rpx;
				height: 50rpx;
				border-radius: 25rpx;
				background-color: #ff483b;
				margin-right: 16rpx;
	
				image {
					width: 40rpx;
				}
			}
		}
	
		.songItem {
			display: flex;
			align-items: center;
			width: 750rpx;
			height: 110rpx;
			padding: 0 30rpx;
			border-top: 1rpx solid #eee;
			
			.coverImg {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 110rpx;
				image {
					width: 80rpx;
					border-radius: 14rpx;
				}
			}
			
			.songItemLeft {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 480rpx;
				height: 110rpx;
				padding-left: 20rpx;
				
				.songName {
					font-size: 30rpx;
					color: #000;
					font-weight: 600;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
	
				.songItemInfo {
					display: flex;
					align-items: center;
					width: 480rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: #777;
					font-size: 24rpx;
	
					text {
						&:last-child {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
	
					image {
						height: 20rpx;
						margin-right: 6rpx;
					}
				}
			}
	
			.songItemRight {
				position: relative;
				width: 130rpx;
				height: 110rpx;
				line-height: 110rpx;
	
				image {
					width: 40rpx;
	
					&:first-child {
						position: absolute;
						width: 45rpx;
						top: 35rpx;
						left: 0;
					}
	
					&:last-child {
						position: absolute;
						top: 35rpx;
						right: 0;
					}
				}
			}
		}
	}
</style>
